//
// Dialog
// --------------------------------------------------

@dialog-index: 1000;

.z-dialog-mask {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0px;
    left: -10000px;
    opacity: 0;
    will-change: opacity;
    transform: translateZ(0px);
    transition: opacity 400ms;
    z-index: @dialog-index;
    background-color: rgba(0, 0, 0, 0.541176);

    &.show {
        left: 0;
        opacity: 1;

        > .dialog {
            opacity: 1;
            transform: translateY(0px);
        }
    }

    > .dialog {
        position: relative;
        top: 16%;
        width: 66%;
        margin: 0 auto;
        opacity: 0;
        transform: translateY(50px);
        border-radius: 2px;
        background-color: #fff;
        transition: opacity 400ms, transform 400ms;
        box-shadow: rgba(0, 0, 0, 0.247059) 0px 14px 45px, rgba(0, 0, 0, 0.219608) 0px 10px 18px;

        > .dialog-title {
            padding: 15px 22px 0;
            font-size: @font-size-bigger;
        }

        > .dialog-body {
            padding: 15px 22px;
        }

        > .dialog-foot {
            padding: 0 16px 7px;
            text-align: right;

            > .btn-flat,
            > .btn-float,
            > .btn-outline {
                margin-left: 5px;
                font-weight: 600;
            }
        }
    }
}